<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ $route.query.id ? '挂号详情' : '历史订单' }}</span>
        </div>
      </template>
      <div class="container" v-if="$route.query.id">
        <detail :orderInfo="orderInfo" :getDetail="initData" />
      </div>
      <div class="order-list" v-else>
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="就诊人">
            <el-select
              clearable
              placeholder="选择就诊人"
              v-model="queryParams.patientId"
              style="width: 200px">
              <el-option
                :value="item.id"
                :label="item.name"
                v-for="item in patientStore.patientList"
                :key="item.id"></el-option>
            </el-select>
            <el-button style="margin-left: 10px;" type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select
              clearable
              placeholder="选择订单状态"
              v-model="queryParams.orderStatus"
              style="width: 200px">
              <el-option
                :value="item.status"
                :label="item.comment"
                v-for="item in statusList"
                :key="item.status"></el-option>
            </el-select>
            <el-button style="margin-left: 10px;" type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <list :orderList="orderList" />
        <el-pagination
          style="margin-top: 15px"
          v-model:page-size="queryParams.page"
          :size="queryParams.limit"
          layout="prev, pager, next, jumper"
          :total="total"
          @size-change="initOrderListData"
          @current-change="initOrderListData" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { reqGetOrderDetail, reqGetOrderList, reqGetOrderStatus } from '@/api/order'
import { orderDetail, SearchParams, OrderStatus } from '@/api/order/type'
import detail from './detail/index.vue'
import list from './list/index.vue'
import usePatientStore from '@/store/modules/patient'

const $route = useRoute()
const patientStore = usePatientStore()

let orderInfo = ref<orderDetail>()
let orderList = ref<orderDetail[]>([])
let queryParams = ref<SearchParams>({
  page: 1,
  limit: 10
})
let total = ref(0)
onMounted(() => {
  patientStore.initPatientList()
  initOrderStatus()
  if ($route.query.id) {
    initData()
  } else {
    initOrderListData()
  }
})
let statusList = ref([] as OrderStatus[])
const initOrderStatus = async () => {
  const { data } = await reqGetOrderStatus()
  statusList.value = data
}
const initData = async () => {
  const { data } = await reqGetOrderDetail($route.query.id as string)
  orderInfo.value = data
}
// 获取所有订单信息
const initOrderListData = async () => {
  const { data } = await reqGetOrderList(queryParams.value)
  orderList.value = data.records
  total.value = data.total
}

const handleSearch = () => {
  queryParams.value.page = 1
  initOrderListData()
}

// 监听路由变化
watch(
  () => $route.query.id,
  () => {
    if ($route.query.id) {
      initData()
    } else {
      initOrderListData()
    }
  }
)
</script>

<style lang="scss" scoped>
.container {
}
</style>
